mixin click-extends({cover, tip, heights})
  -var {url: coverUrl, width: coverWidth, height: coverHeight} = images[cover]
  -var {url: tipUrl, width: tipWidth, height: tipHeight} = images[tip]

  -var contentHeight = 0
  for idx in heights
    -contentHeight += images[idx].height
  // -console.log(contentHeight)
  -var ratio = (contentHeight + coverHeight) / coverHeight * 100
  // -console.log({ratio})

  section(style=`vertical-align:top;margin-top:-1px;margin-bottom:0!important;visibility:visible`)
    section(style=`display:block;margin:0 auto;text-align:center;overflow:hidden;line-height:0;font-size:0;visibility:visible`)

      section(style=`height:0;visibility:visible`)
        svg(style=`display:inline-block;width:100%;vertical-align:top;background-position:0 0;background-repeat:no-repeat;background-size:100% 100%;
        background-attachment:scroll;background-image:url(${coverUrl});-webkit-tap-highlight-color:transparent;user-select:none;line-height:0;
        font-size:0;pointer-events:none;margin-top:0;visibility:visible`, 
        viewBox=`0 0 ${coverWidth} ${coverHeight}`)

        block

      section(style=`display:block;margin-bottom:-2px;text-align:center;margin-left:auto;margin-right:auto;pointer-events:none;-webkit-tap-highlight-color:transparent;-webkit-user-select:none`)
        svg(viewBox=`0 0 ${tipWidth} ${tipHeight}`, style=`transform:scale(1);pointer-events:none;max-width:none!important`)
          g
            rect(x=`0`, y=`0`, width=`100%`, height=`100%`, style=`opacity:0;pointer-events:painted`)
              animate(attributeName=`x`, begin=`click`, dur=`0.01s`, values=`10000`, fill=`freeze`, restart=`whenNotActive`)
            g
              animate(attributeName=`opacity`, values=`1;0.2;1`, begin=`0s`, dur=`1.4s`, repeatCount=`indefinite`)
              foreignObject(x=`0`, y=`0`, width=`${tipWidth}`, height=`${tipHeight}`)
                svg(style=`display:inline-block;width:100%;vertical-align:top;background:url(${tipUrl}) no-repeat 0 0/100% 100%;-webkit-tap-highlight-color:transparent;-webkit-user-select:none`, 
                viewBox=`0 0 ${tipWidth} ${tipHeight}`)
            animateTransform(attributeName=`transform`, type=`translate`, values=`-2000 0`, fill=`freeze`, begin=`click`, dur=`1000s`, restart=`whenNotActive`)
            animate(attributeName=`opacity`, begin=`click`, dur=`.2s`, values=`1;0`, fill=`freeze`, restart=`whenNotActive`)
          animate(attributeName=`width`, fill=`freeze`, restart=`never`, calcMode=`spline`, keySplines=`0.42 0 0.58 1.0; 0.42 0 0.58 1.0`, keyTimes=`0;0.0001;1`, values=`100%;${ratio}%;${ratio}%`, dur=`30000s`, begin=`click+0.2`)


